<template>
  <div class="component">
    <ul>
      <li v-for="(item, index) in zujian" :key="index" @click="current(item)">
        {{ item.name }}
      </li>
    </ul>
    <component :is="nowTab.com"></component>
  </div>
</template>

<script setup lang="ts">
import { reactive, markRaw } from "vue";
import A from "./a.vue";
import B from "./b.vue";
import C from "./c.vue";
// 默认引入的组件也会通过Proxy代理
// markRaw 标记__v-skip:true  对象 跳过代理
type List = {
  name: string;
  com: any;
};

type Com = Pick<List, "com">;
let zujian = reactive<List[]>([
  {
    name: "A组件",
    com: markRaw(A),
  },
  {
    name: "B组件",
    com: markRaw(B),
  },
  {
    name: "C组件",
    com: markRaw(C),
  },
]);
const nowTab = reactive<Com>({
  com: zujian[0].com,
});

const current = (item: List) => {
  console.log(item, ";;;;;;;;;;;");
  nowTab.com = item.com;
};
</script>

<style lang="less" scoped>
.component {
  padding: 20px;
  ul {
    display: flex;
    li {
      width: 100px;
      line-height: 30px;
      border: 1px solid #ccc;
      margin-right: 5px;
      text-align: center;
    }
  }
}
</style>
